<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="iconfont icon-shijian"></i>
        <div class="aui-bar-tab-label">从早到晚</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="iconfont icon-jiagebaohu"></i>
        <div class="aui-bar-tab-label">价格</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="iconfont icon-shijian101"></i>
        <div class="aui-bar-tab-label">起飞时段</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="iconfont icon-listfeiji"></i>
        <div class="aui-bar-tab-label">航空公司</div>
    </div>
</footer>
<!--遮罩-->
<div class="aui-mask aui-mask-in" onclick="shade()" style="display: none;"></div>
<!--起飞时段-->
<div class="time-frame">
    <div class="aui-list aui-content-padded">起飞时段</div>
    <div class="aui-row aui-row-padded">
        <div class="aui-col-xs-4" onclick="am(this)">
            <p><div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm">上午</div></p>
        </div>
        <div class="aui-col-xs-4" onclick="pm(this)">
            <p><div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm">下午</div></p>
        </div>
        <div class="aui-col-xs-4" onclick="night(this)">
            <p><div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm">夜间</div></p>
        </div>
    </div>
    <!--时间选择插件-->
    <div class="check-time">
        <input class="range-slider" type="hidden" value="0,24"/>
    </div>
    <div class="aui-content-padded">
        <p><div class="aui-btn aui-btn-info aui-btn-block" onclick="confirm()">确定</div></p>
    </div>
</div>
<!--航空公司-->
<div class="airline aui-content">
    <li class="aui-list-header">
        航空公司
    </li>
    <div style="overflow:scroll;height: 12rem;">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        <i class="iconfont icon-touchengkongyun"></i>
                        东航</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        <i class="iconfont icon-touchengkongyun"></i>
                        国航</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        <i class="iconfont icon-touchengkongyun"></i>
                        海航</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        <i class="iconfont icon-touchengkongyun"></i>
                        南航</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        <i class="iconfont icon-touchengkongyun"></i>
                        上海</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        <i class="iconfont icon-touchengkongyun"></i>
                        吉祥</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-content-padded" style="margin: 0 0.75rem;">
        <p><div class="aui-btn aui-btn-info aui-btn-block" onclick="screen()">筛选</div></p>
    </div>
</div>

<script>
    am = function (obj) {
        $('.range-slider').jRange('setValue', '0,12');
        $('.time-frame').find('.aui-btn-sm').removeClass('pitch-on')
        $(obj).find('div').addClass('pitch-on');
    }
    pm = function (obj) {
        $('.range-slider').jRange('setValue', '12,18');
        $('.time-frame').find('.aui-btn-sm').removeClass('pitch-on')
        $(obj).find('div').addClass('pitch-on');
    }
    night = function (obj) {
        $('.range-slider').jRange('setValue', '18,24');
        $('.time-frame').find('.aui-btn-sm').removeClass('pitch-on')
        $(obj).find('div').addClass('pitch-on');
    }

    /*滑块选择时间*/
    $('.range-slider').jRange({
        from: 0, to: 24, step:1,
        scale: ['00:00','04:00','08:00','12:00','16:00','20:00','24:00'],
        format: '%s',
        width: 300,
        showLabels: true,
        showScale : true,
        isRange : true,
        theme :  'theme-blue'
    });
    $(function(){
        var tab = new auiTab({
            element:document.getElementById("footer"),
            index:1,
            repeatClick:false
        },function(ret){
            switch (ret.index)
            {
                case 1:
                    break;
                case 2:
                    break;
                case 3:
                    break;
                case 4:
                    break;
            }
        });
    });
    /*底部导航*/
    shade = function() {
        $('.aui-mask').fadeOut(1000);
        $('.time-frame').slideUp(1000);
        $('.airline').slideUp(1000);
    };
    confirm = function() {
        shade();
    }
    screen = function() {
        shade();
    }
    //起飞时间按钮部分
    var i = 0;
    $('.aui-bar-tab-label').eq(0).on('click',function() {
        shade();
        $('.aui-bar-tab-label').eq(1).text('价格')
        i++;
        i%2 == 1 ?departureTime_one(this) :departureTime_two(this);
    });
    function departureTime_one(obj) {
        $(obj).text('从早到晚')
    }
    function departureTime_two(obj) {
        $(obj).text('从晚到早')
    }
    //价格按钮部分
    var a = 0;
    $('.aui-bar-tab-label').eq(1).on('click',function() {
        shade();
        $('.aui-bar-tab-label').eq(0).text('起飞时间')
        a++;
        a%2 == 1 ?price_one(this) :price_two(this);
    });
    function price_one(obj) {
        $(obj).text('从高到低')
    }
    function price_two(obj) {
        $(obj).text('从低到高')
    }

    $('.aui-bar-tab-label').eq(2).on('click',function() {
        $('.aui-mask').fadeIn();
        $('.time-frame').slideDown(1000)
    });

    $('.aui-bar-tab-label').eq(3).on('click',function() {
        $('.aui-mask').fadeIn();
        $('.airline').slideDown(1000);
    });

</script>
